<template>
  <div class="IndexDefault">
    <div class="header-text">
      <div style="display:flex;justify-content: center;padding-top: 20px;">
        <div class="header-company">
          <div class="box-title"  @click="goTo('/commercial')">
            <span class="num-title">{{getIndexList.numberCo}}<span class="ren-title">人</span></span>
            <br>
            <span class="bom-title">商保理赔中</span>
          </div>
          <span class="xuxian"></span>
        </div>
        <div class="header-social">
          <div class="box-title" @click="goTo('/social')">
            <span class="num-title">{{getIndexList.numberSo}}<span class="ren-title">人</span></span>
            <br>
            <span class="bom-title">社保理赔中</span>
          </div>
          <span class="xuxian"></span>
          </div>
        <div class="header-payment">
          <div class="box-title">
            <span class="num-title">{{Num}}<span class="ren-title">张</span></span>
            <br>
            <span class="bom-title">待支付订单</span>
          </div>
          <span class="xuxian"></span>          
        </div>
        <div class="header-balance">
          <div class="box-title">
            <span class="xian-title">{{xianjin}}<span class="xianyuan-title">元</span></span>
            <br>
            <span class="bom-title">账户余额</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 中部 -->
    <div class="main-content">
      <div class="content-box" style="margin-right:20px">
        <div class="content-header">
          <img class="content-header-img" src="../../img/社保查询.png">
          <span class="content-title-dan">社保异常名单&emsp;</span>
          <span class="content-title-dan-gengduo">更多</span>
        </div>
        <div class="content-img">
          <img class="content-img-content" src='../../img/申报中.png' v-if="!isShowshe">
          <img class="content-img-content" src="../../img/申报失败.png"  v-if="isShowshe">
        </div>
        <div class="content-bom-title">
          <span class="content-bom-title-span" v-if="!isShowshe">正常申报中...</span>
          <div v-if="isShowshe">
            <div v-for="(item,index) in societyList.slice(0, 2)" :key="index" style="display: flex;justify-content: center;">
              <div class="content-bom-title-span-one"> {{item.name}}</div>
              <div class="content-bom-title-span-two">{{item.create_time}}</div>
              <div class="content-bom-title-span-three">申报失败</div>
            </div>  
          </div>
        </div>
      </div>
      <div class="content-box" style="margin-right:20px">
        <div class="content-header">
          <img class="content-header-img" src="../../img/公积金异常名单小图标.png">
          <span class="content-title-dan">公积金异常名单</span>
          <span class="content-title-dan-gengduo">更多</span>
        </div>
        <div class="content-img">
          <img class="content-img-content" src='../../img/申报中.png' v-if="!isShowgong">
          <img class="content-img-content" src="../../img/申报失败.png"  v-if="isShowgong">
        </div>
        <div class="content-bom-title">
          <span class="content-bom-title-span" v-if="!isShowgong">正常申报中...</span>
          <div v-if="isShowgong">
            <div v-for="(item,index) in accumulationList.slice(0, 2)" :key="index" style="display: flex;justify-content: center;">
              <div class="content-bom-title-span-one"> {{item.name}}</div>
              <div class="content-bom-title-span-two">{{item.create_time}}</div>
              <div class="content-bom-title-span-three">申报失败</div>
            </div>  
          </div>
        </div>
      </div>
      <div class="content-box">
        <div class="content-header">
          <img class="content-header-img" src="../../img/商保查询.png">
          <span class="content-title-dan">商保异常名单&emsp;</span>
          <span class="content-title-dan-gengduo">更多</span>
        </div>
        <div class="content-img">
          <img class="content-img-content" src='../../img/申报中.png' v-if="!isShowshang">
          <img class="content-img-content" src="../../img/申报失败.png"  v-if="isShowshang">
        </div>
        <div class="content-bom-title">
          <span class="content-bom-title-span" v-if="!isShowshang">正常申报中...</span>
          <div v-if="isShowshang">
            <div v-for="(item,index) in commercialList.slice(0, 2)" :key="index" style="display: flex;justify-content: center;">
              <div class="content-bom-title-span-one"> {{item.name}}</div>
              <div class="content-bom-title-span-two">{{item.create_time}}</div>
              <div class="content-bom-title-span-three">申报失败</div>
            </div>  
          </div>
        </div>
      </div>
    </div>
    <div class="bootem-main">
        <div class="bootem-header">
          <img class="bootem-header-img" src="../../img/快捷菜单.png">
          <span class="bootem-header-span">快捷操作</span>
        </div>
        <div class="kuaijieList">
          <div class="kuaijieList-box" @click="goTo('/addmember')">
            <img class="kuaijieList-box-img" src="../../img/增员.png">
          </div>
          <div class="kuaijieList-box" @click="goTo('/delmember')">
            <img class="kuaijieList-box-img" src="../../img/减员.png">
          </div>
          <div class="kuaijieList-box" @click="goTo('/adjustablebase')">
            <img class="kuaijieList-box-img" src="../../img/调基.png">
          </div>
        </div>
    </div>
  </div>

</template>

<script>
// import ada from '../img/'
export default {
  data(){
    return{
      Num:1,
      xianjin:"2389.00",
      isShowshe:Boolean,
      isShowgong:Boolean,
      isShowshang:Boolean,
      societyList:[], // 社保
      commercialList:[], // 商保
      accumulationList:[], // 公积金
      ssbToken:'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MjQ3NjMwNzQsInVzZXJpZCI6IjEyMyIsInVzZXJuYW1lIjoi5a6255S1IiwidG9rZW4iOiJlcnF3ZXF3In0.TT98ZUm-de20LIc6s_3OVyIXUqfO9780jE0Y5LSJ1ls',
      company:"1",
      getIndexList:[]

    }
  },
  mounted(){
    this.getHome();
    if(this.societyList.length= 0){
       this.isShowshe = true
    }else if(this.societyList.length > 0){
       this.isShowshe = false
    }
    if(this.accumulationList.length = 0){
       this.isShowgong = true
    }else if(this.accumulationList.length > 0){
       this.isShowgong = false
    }
    if(this.commercialList.length = 0){
       this.isShowshang = true
    }else if(this.commercialList.length > 0){
       this.isShowshang = false
    };
  },
  methods:{
    goTo(path) {
      if (this.$route.path !== path && this.$route.path !== null) {
        this.$router.push({ path: path })
      }
    },
    getHome(){
      this.$axios.get('http://172.16.1.105:7070/shangshebao/getIndex',{
        headers:{
          token: this.ssbToken
        },
        params:{
          company_id : this.company
        }
      }).then(res => {
          this.societyList = res.data.data.society
          this.commercialList = res.data.data.commercial
          this.accumulationList = res.data.data.accumulation;
          this.getIndexList = res.data.data;
          // console.log(this.getIndexList);
      }).catch(error => {
        alert(error);
      })
    }
  }
}
</script>

<style scoped>
  .IndexDefault{
    margin-right: 22px;
  }
  .header-text{
    /* width: 1200px; */
    height: 130px;
    background: #FFFFFF;
    border-radius: 5px;
    box-shadow: 4px 4px 4px 0px rgba(197, 197, 197, 0.5);
  }
  .header-company:hover,
  .header-social:hover,
  .header-payment:hover,
  .header-balance:hover {
    background:#F1EEFF
  }
  .header-company,
  .header-social,
  .header-payment{
    width:264px;
    height:90px;
    text-align: center;
    /* line-height: 90px; */
    position: relative;
    cursor: pointer
  }
  .xuxian{
    border-right: 1px dashed #706C6C;
    position: absolute;
    right: 0px;
    height: 27px;
    top: 30px;
  }
  .header-balance{
    width:264px;
    height:90px;
    text-align: center;
    cursor: pointer
  }
  .num-title{
    font-size: 36px;
    font-family: "Helvetica-Roman-SemiB", "Helvetica-Roman";
    font-weight: 600;
  }
  .ren-title{
    font-size: 12px;
    font-family: "Helvetica-Roman-SemiB", "Helvetica-Roman";
  }
  .bom-title{
    font-size: 14px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: #939393;
  }
  .xian-title{
    font-size: 36px;
    font-family: "Helvetica-Roman-SemiB", "Helvetica-Roman";
    font-weight: 600;
    color: #7A5FF7;
  }
  .xianyuan-title{
    font-size: 12px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    color: #7A5FF7;
  }
  .box-title{
    margin-top: 12px;
  }
  .main-content{
    margin-top:20px;
    display: flex;
  }
  .content-box{
    width: 33%;
    height: 260px;
    background: #FFFFFF;
    border-radius: 5px;
    /* margin-right: 20px; */
    box-shadow: 4px 4px 4px 0px rgba(197, 197, 197, 0.5);
  }
  .content-header{
    padding: 26px 0 0 20px;
    display: flex;
  }
  .content-header-img{
    width: 30px;
    height: 30px;
  }
  .content-title-dan{
    font-size: 16px;
    font-family: "PingFangSC-Semibold", "PingFang SC";
    font-weight: 600;
    color: #3E3838;
    padding: 6px 0 0 4px;
  }
  .content-title-dan-gengduo{
    font-size: 16px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: #7A5FF7;
    cursor: pointer;
    text-align: right;
    flex: 1;
    margin: 4px 12px 0 0;
  }
  .content-img{
    text-align: center;
    margin-top: 24px;
  }
  /* .content-img-content{
    width: 216px;
    height: 130px;    
  } */
  .content-bom-title{
    text-align: center;
    margin-top: 10px;
  }
  .content-bom-title-span{
    font-size: 14px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: #939393;
  }
  .content-bom-title-span-one{
    font-size: 14px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: #3E3838;
    width: 60px;
  }
  .content-bom-title-span-two{
    margin-left: 18px;
    font-size: 14px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: #3E3838;
  }
  .content-bom-title-span-three{
    font-size: 14px;
    font-family: "PingFangSC-Regular", "PingFang SC";
    font-weight: 400;
    color: #F75F82;
    margin-left: 20px;
  }
  .bootem-main{
    /* width: 1200px; */
    height: 364px;
    background: #FFFFFF;
    border-radius: 5px;
    margin-top: 20px;
    box-shadow: 4px 4px 4px 0px rgba(197, 197, 197, 0.5);
  }
  .bootem-header{
    padding: 16px 0 20px 20px;
    display: flex;
  }
  .bootem-header-img{
    width: 30px;
    height: 30px;
  }
  .bootem-header-span{
    font-size: 16px;
    font-family: "PingFangSC-Semibold", "PingFang SC";
    font-weight: 600;
    color: #3E3838;
  }
  .kuaijieList{
    display: flex;
  }
  .kuaijieList-box{
    width: 150px;
    height: 150px;
    text-align: center;
    /* background: pink; */
    margin-left: 20px;
    
  }
  .kuaijieList-box-img{
    margin-top: 10px;
    cursor: pointer;
  }
</style>
